介绍

webpack 在执行流程中通过大量的hook对外暴露出当前的执行流程，并允许外界程序通过hook修改或者自定义程序行为。

import { SyncHook } from 'tapable';
const sleep = new SyncHook;

sleep.tap('test-name', (webpackContext) => {
    console.log(webpackContext);
    console.log('test-name callback')
})

sleep.call(some)

由上面可以看到，webpack hook 机制就是新建hook, 插件订阅hook，webpack内部触发hook、 针对这三个流程，又做了详细的扩充

创建hook

webpack 有不同的hook,不同hook表示内部的回调如何执行。 按照回调逻辑区分

• 正常依次执行回调
• waterfall:前一个回调的值会带入下一个回调
• bail 依次调用回调，如果有任何一个回调的值返回undefined，后续的回调值取消
• loop 循环执行回调， 直到有一个回调返回undefined

按照执行回调的方式区分

• sync 同步的执行回调，通过return 返回回调的结果
• async 异步的执行的回调，通过return promies 结果或者callback结果。异步的钩子通过同步的方式执行没有意义拿不到结果，当然不需要结果的除外。

订阅hook

有tap(同步订阅),tapAsync(异步订阅)和tapPromise(返回一个promise订阅的方式)

执行hook

执行回调的方式有call(依次执行回调函数，会等回调函数执行完), callAsync(异步的依次执行函数，不会等待)，promise(返回一个promise来表示回调的执行结果)